<template>
  <div class="main_box" style="padding:10px">
      <div class="detail_wrap">
        <div class="tit">
             <h2>基础信息</h2>
             <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList"> 返回</el-button>
        </div>
        <div class="con">
            <ul>
                <li>
                    <label class="label">设备名称：</label>
                    <span>{{dataInfo.boxName}}</span>
                </li>
                <li>
                    <label class="label">设备编号：</label>
                    <span>{{dataInfo.boxCode}}</span>
                </li>
                <li v-if="fromType == 1">
                    <label class="label">物联网卡：</label>
                    <span>{{dataInfo.iccid}}</span>
                </li>
                <li>
                    <label class="label">收样员：</label>
                    <span>{{dataInfo.syUserName}}</span>
                </li>
                <li v-if="fromType == 1">
                    <label class="label">备注：</label>
                    <span>{{dataInfo.remark}}</span>
                </li>
                <li v-if="fromType == 1">
                    <label class="label">创建人：</label>
                    <span>{{dataInfo.createUserName}}</span>
                </li>
                <li v-if="fromType == 1">
                    <label class="label">创建时间：</label>
                    <span>{{dataInfo.createDate}}</span>
                </li>
            </ul>
        </div>
        <div class="tit">
            <h2>状态信息</h2>
        </div>
        <div class="con">
            <ul>
                <li>
                    <label class="label">设备所在位置：</label>
                    <span>{{dataInfo.addr|IsNull}}</span>
                </li>
                <li>
                    <label class="label">当前温度：</label>
                    <span>{{dataInfo.temp|IsNull}} ℃</span>
                </li>
                <!--<li>
                    <label class="label">当前湿度：</label>
                    <span>{{dataInfo.demp|IsNull}} RH</span>
                </li>-->
                <li>
                    <label class="label">当前电量：</label>
                    <span>{{dataInfo.power|IsNull}}</span>
                </li>
                <li>
                    <label class="label">当前倾斜度：</label>
                    <span>{{dataInfo.tilt|IsNull}} °</span>
                </li>
                <li>
                    <label class="label">设备状态：</label>
                    <span>{{dataInfo.boxStatus|BoxFilter}}</span>
                </li>
                <li>
                    <label class="label">锁状态：</label>
                    <span>{{dataInfo.openStatus|OpenFilter}}</span>
                </li>
                <li>
                    <label class="label">制冷状态：</label>
                    <span>{{dataInfo.coldStatus|ColdFilter}}</span>
                </li>
                <li>
                    <label class="label">报警状态：</label>
                    <span>{{dataInfo.warnStatus|warnFilter}}</span>
                </li>
            </ul>
        </div>
        <div class="tit">
            <h2>参数信息</h2>
        </div>
        <div class="con">
            <ul>
                <li>
                  <label class="label">温度最低警报值：</label>
                  <span>{{dataInfo.tempMin}} ℃</span>
                </li>
                <li>
                    <label class="label">温度最高警报值：</label>
                    <span>{{dataInfo.tempMax}} ℃</span>
                </li>
                <li>
                    <label class="label">蓝牙上报频率：</label>
                    <span>{{dataInfo.rfidMin}} 分钟/次</span>
                </li>
                <li>
                    <label class="label" style="width: 169px;margin-left: -25px;">心跳上报频率：</label>
                    <span>{{dataInfo.beat}} 秒/次</span>
                </li>
            </ul>
        </div>

        <div class="tit" v-if="fromType > 1">
          <h2>心跳记录  &nbsp;&nbsp;&nbsp; <el-button  plain type="success" icon="el-icon-folder" @click="handleClickExport">导出数据</el-button></h2>
        </div>
        <div class="con" v-if="fromType > 1">
          <el-row ref="tableRow">
            <!-- 列表 -->
            <el-table :data="dataList"  :fit="true" highlight-current-row>
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <el-table-column prop="createDate" label="创建时间"></el-table-column>
              <el-table-column prop="temp" :formatter="formatTemp" label="温度" width="80" align="center"></el-table-column>
              <el-table-column label="锁状态" width="100" align="center">
                <template slot-scope="scope">
                <span>
                  <el-tag size="mini" effect="plain" :type="isTrueType(scope.row.openStatus)">
                    {{scope.row.openStatus|OpenFilter}}
                  </el-tag>
                </span>
                </template>
              </el-table-column>
              <!--<el-table-column prop="damp" :formatter="formatDemp" label="湿度" width="60" align="center"></el-table-column>-->
              <el-table-column prop="power" label="电量" width="80" align="center"></el-table-column>
              <el-table-column prop="tilt" :formatter="formatTilt" label="倾斜度" width="100" align="center"></el-table-column>
              <el-table-column prop="addr" label="位置" width="180"></el-table-column>
              <el-table-column label="报警状态" width="100" align="center">
                <template slot-scope="scope">
                <span>
                  <el-tag size="mini" :type="formatWarns(scope.row.warnStatus)">
                    {{scope.row.warnStatus|warnFilter}}
                  </el-tag>
                </span>
                </template>
              </el-table-column>
              <el-table-column label="制冷状态" width="100" align="center">
                <span>无</span>
                <!--<template slot-scope="scope">
                  <span>
                    <el-tag size="mini" effect="plain" :type="isTrueType(scope.row.coldStatus)">

                    </el-tag>
                  </span>
                </template>-->
              </el-table-column>
              <!--<el-table-column label="元件异常状态" width="100" align="center">
                <template slot-scope="scope">
              <span>
                <el-tag size="mini" effect="dark" :type="formatErrors(scope.row.errorStatus)">
                </el-tag>
              </span>
                </template>
              </el-table-column>-->
            </el-table>
          </el-row>
        </div>

      </div>
  </div>
</template>

<script>

import EquipApi from '@/api/equip/equip';

export default {
    name:'boxDetail',
    data(){
        return{
          dataInfo: {},
          dataList: [],
          fromType: 1
        }
    },
    mounted(){
        this.init();
    },
    beforeRouteEnter(to,from,next){
      next(vm => {
        if (from.path == '/equip/boxManagement') {
          vm.getData(1);
        }else if (from.path == '/report/reportManagement') {
          vm.getData(2);
        }else if (from.path == '/hsReport/hsReportManagement') {
          vm.getData(3);
        }
      })
    },
    filters: {
      BoxFilter(value) {
        if(value == 0 ) {
          return "未连接";
        } else if (value == 1) {
          return "已连接";
        } else if (value == 2) {
          return '已断开';
        } else if (value == 3) {
          return '已休眠';
        }
      },
      OpenFilter(value) {
        if(value == 0 ) {
          return "关闭";
        } else if (value == 1) {
          return "开启";
        }
      },
      ColdFilter(value) {
        return "无";
        /*if(value == 0 ) {
          return "未制冷";
        } else if (value == 1) {
          return "制冷中";
        }*/
      },
      warnFilter(value) {
        if(value == 0 ) {
          return "正常";
        } else if (value == 1) {
          return "低温警告";
        } else if (value == 2) {
          return "高温警告";
        } else if (value == 3) {
          return "倾斜警告";
        } else if (value == 4) {
          return "锁未关警告";
        }
      },
      IsNull(value) {
          if(value){
            return  value ;
          }else{
            return "未知";
          }
      }
    },
    methods:{
        /*init(){
            var cond ={
                id:this.$route.query.id
            }
            EquipApi.getEquipBoxInfo(cond)
                .then(res =>{
                    this.dataInfo = res.data
                });
        },*/
      formatTemp(row, column, cellValue){
        if(cellValue){
          return cellValue + ' ℃'
        }else{
          return ' - '
        }
      },
      formatDemp(row, column, cellValue){
        if(cellValue){
          return cellValue + ' RH'
        }else{
          return ' - '
        }
      },
      formatTilt(row, column, cellValue){
        if(cellValue){
          return cellValue + ' °'
        }else{
          return ' - '
        }
      },
      formatWarns(cellValue){
        if(cellValue == 0){
          return "success"
        }else if(cellValue == 1){
          return ""
        }else if(cellValue == 2){
          return "danger"
        }else if(cellValue == 3){
          return "warning"
        }else if(cellValue == 3){
          return "warning"
        }
      },
      isTrueType(cellValue){
        if(cellValue == 0){
          return "warning"
        }else if(cellValue == 1){
          return "success"
        }else{
          return "info"
        }
      },
      handleClickExport(){
        if (!this.dataList || this.dataList.length < 1){
          this.$Utils.notifyError("暂无数据，无法导出");
          return
        }
        // 导出，获取到pfd路径
        EquipApi.exportEquipBoxLogs({
          boxId: this.$route.query.id,
          syUserId: this.$route.query.syUserId
        }).then(res => {
          if (res.data){
            window.open(res.data,"_blank");
            //this.$Utils.downloadFile(res.data,"温控设备导出数据");
          }
        });
      },
      getData(type) {
        this.fromType = type;
        EquipApi.getEquipBoxInfo({
          id: this.$route.query.id
        }).then(res => {
          this.dataInfo = res.data;
        });
        if (type > 1){
          this.getDataRecord()
        }
      },
    //查询标本箱心跳日志列表
      getDataRecord() {
        EquipApi.getEquipBoxLogTable({
          boxId: this.$route.query.id
        }).then(res => {
          this.dataList = res.data;
        });
      },
      returnList(){
        if(this.fromType == 1){
          this.$store.dispatch('delView', this.$route);
          this.$router.push({path: '/equip/boxManagement'});
        }else if(this.fromType == 2){
          this.$store.dispatch('delView', this.$route);
          this.$router.push({ path: "/report/reportManagement" });
        }else if(this.fromType == 3){
          this.$store.dispatch('delView', this.$route);
          this.$router.push({ path: "/hsReport/hsReportManagement" });
        }
      }

    }

}
</script>

<style lang="scss" src="@/assets/css/views/Detail.scss" scope>
</style>
